<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.staticfile.org/echarts/5.4.0/echarts.min.js"></script>
</head>

<body>
    <div id="chart" style="width: 80vw;margin: 200px; height: 100px;"></div>

    <script type="module">
        const barData = [
            {
                typeName: "2022年重大风险电网防控项目",
                planNum: 2,
                completeNum: 0,
                inSupplyNum: 2,
            },
        ];
        const obj = {
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
                hideDelay: 0,
                confine: false,
            },
            grid: {
                left: 0,
                top: 20,
                right: 0,
                bottom: 0,
                containLabel: true,
            },
            xAxis: {
                type: "value",
                //max: 27,
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: false, // 显示 x 轴标签
                },
                axisTick: {
                    show: false,
                },
            },
            yAxis: {
                type: "category",
                data: ["2023年迎峰度夏"],
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
            series: [
                {
                    name: "已完成",
                    type: "bar",
                    stack: "总数",
                    barWidth: 18,
                    legendHoverLink: false,
                    //    silent: true,
                    data: [
                        {
                            typeName: "2023年迎峰度夏1",
                            planNum: 27,
                            completeNum: 0,
                            inSupplyNum: 18,
                            value: 900,
                        },
                    ],

                    itemStyle: {
                        color: 'rgb(133, 226, 187)'
                        //  color: 'blue'
                    },
                    label: {
                        show: true,
                        position: [0, -25],
                        textStyle: {
                            color: 'rgba(0,0,0,0)',

                        },
                        rich: {
                            a: {
                                width: 190,
                                fontSize: 14,
                                color: 'black',
                                padding: [0, 80, 0, 0] // 右间距 20px
                            },
                            a1: {
                                width: 190,
                                fontSize: 14,
                                color: 'black',
                                padding: [0, 20, 0, 0] // 右间距 20px
                            },
                            b: {
                                width: 190,
                                fontSize: 20,
                                color: '#fff',
                            },
                            b1: {
                                width: 120,
                                fontSize: 16,
                                color: '#fff',
                            },
                            c: {
                                width: 190,
                                fontSize: 20,
                                color: '#fff',
                            },
                            c1: {
                                width: 120,
                                fontSize: 16,
                                color: '#fff',
                            },
                            d: {
                                width: 190,
                                fontSize: 20,
                                color: '#fff',
                            },
                            d1: {
                                width: 120,
                                fontSize: 16,
                                color: '#fff',
                            },
                            e: {
                                width: 190,
                                fontSize: 20,
                                color: '#fff',
                            },
                            e1: {
                                width: 120,
                                fontSize: 16,
                                color: '#fff',
                            },
                        },
                        formatter: function (params) {
                            let quarterStyle = 'a';
                            let textStyle = 'a1';
                            let str = '';
                            //   barData.some((item) => {
                            //   if (item.typeName === params.data.typeName) {
                            str = [
                                `{${quarterStyle}|${barData[0].typeName || ''}}}`,
                                `{${textStyle}|项目总条数：${barData[0].planNum || 0}}`,
                                `{${textStyle}|已完成项目数：${barData[0].completeNum || 0}}`,
                            ].join('');
                            console.log(str, 'string');
                            return str;
                            // barData.forEach((item) => {
                            // })
                        },
                    },
                },
                {
                    name: "项目总数",
                    type: "bar",
                    stack: "总数",
                    legendHoverLink: false,
                    // barGap: "-103%",
                    itemStyle: {
                        color: 'rgb(51, 114, 246)'
                        // color: 'red'
                    },
                    data: [
                        {
                            typeName: "2023年迎峰度夏",
                            planNum: 27,
                            completeNum: 0,
                            inSupplyNum: 18,
                            value: 700,
                        },
                    ],
                    z: 1,

                    barWidth: 18,
                },
                {
                    name: "在供",
                    type: "bar",
                    stack: "总数",
                    barWidth: 18,
                    legendHoverLink: false,
                    //      silent: true,
                    itemStyle: {
                        color: 'rgb(243, 179, 78)'
                        // color: 'red'
                    },
                    data: [
                        {
                            typeName: "2023年迎峰度夏",
                            planNum: 27,
                            completeNum: 0,
                            inSupplyNum: 18,
                            value: 1010,
                        },
                    ],
                    z: 2

                },



            ],
        };
        // 动态计算 xAxis 的 max 值
        let maxValue = 0;
        obj.series.forEach(series => {
            series.data.forEach(data => {
                maxValue += data.value
            });
        });
        obj.xAxis.max = maxValue;
        console.log(obj, 'obj');
        const chart = echarts.init(document.getElementById('chart'));
        chart.setOption(obj);
    </script>
</body>

</html>